<template>
  <div>
    <refund-abnormal-modal :visible.sync="visible" ref="refundAbnormalModal" :id="orderId"></refund-abnormal-modal>
    <el-form label-position="left" label-width="120px">
      <Portlet title="发起信息">
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="发起账号：">
              <span>{{ founderName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发起时间：">
              <span>{{foundDate | unixTimestampFilter}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退款金额：">
              <span>{{refundAmount | decimalNumFilter}} 元</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退款说明：">
              <span>{{refundMemo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退款图片：">
              <upload-image :formData="{}" :value="getImage(refundPic)" :readonly="true"></upload-image>
            </el-form-item>
          </el-col>
        </el-row>
      </Portlet>
      <Portlet v-if="isCanArbitration === 1 || isCanArbitration === '1'">
        <div class="text-center">
          <el-button type="primary" @click.prevent="arbitration"> 发起仲裁</el-button>
          <p style="padding-top: 5px; font-size: 12px;">7天默认退款，3天之后可发起仲裁</p>
        </div>
      </Portlet>
    </el-form>
  </div>
</template>
<script>
import {dotData} from '@/utils'
import {unixTimestampFilter, decimalNumFilter} from '@/filters'
import RefundAbnormalModal from '@/views/fhb/refund/RefundAbnormalModal'

export default {
  name: 'refundStart',
  components: {
    RefundAbnormalModal
  },
  filters: {
    unixTimestampFilter,
    decimalNumFilter
  },
  props: {
    refundDetail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    founderName() {
      return dotData(this.refundDetail, 'founderName')
    },
    foundDate() {
      return dotData(this.refundDetail, 'foundDate')
    },
    refundAmount() {
      return dotData(this.refundDetail, 'refundAmount')
    },
    refundMemo() {
      return dotData(this.refundDetail, 'refundMemo')
    },
    refundPic() {
      return dotData(this.refundDetail, 'refundPic')
    },
    isCanArbitration() {
      return dotData(this.refundDetail, 'isCanArbitration')
    },
    orderId() {
      return dotData(this.refundDetail, 'orderId')
    }
  },
  methods: {
    // 获取图片
    getImage(val) {
      if (Array.isArray(val)) {
        return val
      }
      if (typeof val === 'string' && val) {
        return val.split(',')
      }
      return []
    },
    arbitration() {
      this.visible = true
    }
  }
}
</script>
